<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { ResourceItem, VipItem } from '@/types/home'
import { getUserVipAPI, getVipAPI } from '@/services/home'
import { useMemberStore } from '@/stores'

// 获取会员信息
let memberStore = reactive<any>({})
memberStore = useMemberStore()
const taocan_list = ref<VipItem[]>([])
const taocan_user_string = ref<any>('')
// 上次点击的对象
const style_last = ref<number>(-1)
// 创建ref各自的style
// const styles: any = {}
const styles: any = reactive({})
// 创建对象 { Ref1: ref(null), Ref2: ref(null), ... }
const refs: any = {}
for (let i = 0; i <= 10; i++) {
  // refs[`ref${i}`] = ref(null)
  styles[i] = ref<string>('border: 3rpx solid #e2e8f0; color: #333333; background-color: #ffffff;')
}
// 改变标签的背景颜色
const changeBgColor = (index: number) => {
  // 修改上次点击过的标签背景颜色为白色，即原始的颜色
  if (style_last.value >= 0) {
    styles[style_last.value] =
      'border: 3rpx solid #e2e8f0; color: #333333; background-color: #ffffff; transition: background-color 0.5s ease'
  }
  // 将当前选中的标签背景颜色改为深色
  styles[index] =
    'border: 6rpx solid #888888; color: #ffffff; background-color: #f4ea5e; transition: background-color 0.5s ease'
  style_last.value = index
}
const state = reactive({
  taocan_index: -1,
})
onLoad(async () => {
  console.log('父组件页面加载')
  getTaocanData()
  getTaocanUserData()
})
// 获取套餐
const getTaocanData = async () => {
  const res = await getVipAPI()
  // console.log('根据知识点获取题目：', res)
  if (Array.isArray(res.results) && res.results.length > 0) {
    taocan_list.value = res.results
  } else {
    uni.showToast({ icon: 'error', title: '触底添加数据失败' })
  }
}
// 获取用户已经购买的套餐
const getTaocanUserData = async () => {
  const res = await getUserVipAPI()
  // console.log('根据知识点获取题目：', res)
  if (res.code == 200) {
    taocan_user_string.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '您还没购买套餐哦' })
  }
}
// 选中套餐
const onClickSelectTaocan = (index: number) => {
  state.taocan_index = index
  changeBgColor(index)
}
// 处理开通此套餐
const onClickBuyTaocan = () => {
  uni.showToast({ icon: 'success', title: '联系客服开通' })
}
// 联系我们
const onClickContact = () => {
  console.log('联系我们')
  uni.navigateTo({
    url: `/pages/my/contact`,
  })
}
</script>

<template>
  <view enable-back-to-top class="container">
    <view class="header">
      <view class="left">
        <uni-icons type="person" size="30"></uni-icons>
      </view>
      <view class="right">
        <text v-if="memberStore.profile">亲爱的：{{ memberStore.profile.username }}</text>
        <view class="two_item">
          <text style="font-size: xx-small">您已购买：</text>
          <text style="font-size: xx-small">{{ taocan_user_string }}</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="lianxi" @click="onClickContact">
        <text style="font-weight: bold"> 会员套餐 </text>
        <uni-icons type="weixin" size="30"></uni-icons>
      </view>
      <view class="taocan">
        <view
          class="taocan_item"
          v-for="(item, index) in taocan_list"
          :key="index"
          @click="onClickSelectTaocan(index)"
          :style="styles[index]"
        >
          <text style="color: chocolate; font-size: medium">{{ item.name }}</text>
          <text style="color: olive; font-size: medium">￥{{ item.price }}</text>
          <text style="color: darkolivegreen; font-size: small">有效期{{ item.duration }}天</text>
        </view>
      </view>
    </view>
    <view class="button">
      <button type="primary" size="mini" @click="onClickBuyTaocan">开通此套餐</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #dadadce7;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(../../static/images/center_bg.png);
  background-size: 100% auto;
}
.header {
  display: flex;
  flex-direction: row;
  margin-top: 100rpx;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5rpx;
}
.taocan {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 20rpx;
  padding: 5rpx;
}
.taocan_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3rpx;
  padding: 2rpx;
  border: 3rpx solid #e2e8f0;
  border-radius: 20rpx;
  width: 30%;
  height: 250rpx;
}
.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.two_item {
  display: flex;
  flex-direction: row;
}
.lianxi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
